import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../../store/actions';
import { Tabs } from 'antd-mobile'
import List from '../../../components/List'
class Index extends Component {
  componentDidMount() {
    const action = actions.getTabList()
    this.props.dispatch(action)
  }
  render() {
    const { tabList } = this.props
    console.log(tabList);
    return (
      <div>
        {/* 6.实现首页的选项卡功能，支持高亮效果 */}
        <Tabs defaultActiveKey="0">
          {
            tabList.length>0 && tabList.map((v, i) => {
              return (
                <Tabs.TabPane title={v.title} key={i}>
                  <List list={ v.children } type="column"></List>
                </Tabs.TabPane>
              )
            })
          }
        </Tabs>
      </div>
    );
  }
}

const mapState = (state) => {
  return { ...state }
}
const mapDiapatch = dispatch => {
  return { dispatch }
}
// 9.使用装饰器语法，动态绑定redux接口数据到分类页面
export default connect(mapState, mapDiapatch)(Index);
